/* eslint-disable */

import { useRef, useState } from 'react';
import AceEditor, { IAceOptions } from 'react-ace';
// import languageTools from 'ace-builds/src-min-noconflict/ext-language_tools';
import 'ace-builds/src-min-noconflict/ext-searchbox';
// import 'ace-builds/src-min-noconflict/theme-sqlserver';
import 'ace-builds/src-min-noconflict/theme-eclipse';
import 'ace-builds/src-min-noconflict/theme-monokai';
import 'ace-builds/src-min-noconflict/mode-sql';
import ReactAce, { IAceEditorProps } from 'react-ace/lib/ace';
// import { debounce } from 'lodash';
import styles from './style.less';

type TMode = 'sql' | 'mysql' | 'sqlserver';

// type TTheme =
//     | 'ambiance'
//     | 'chaos'
//     | 'chrome'
//     | 'clouds'
//     | 'dawn'
//     | 'eclipse'
//     | 'github'
//     | 'kuroir'
//     | 'terminal'
//     | 'textmate'
//     | 'tomorrow'
//     | 'twilight'
//     | 'xcode'
//     | 'monokai'
//     | 'sqlserver';

const DEFAULT_FONT_SIZE = '16px';
// const THEME_DEFAULT = 'sqlserver';
const MODE_DEFAULT = 'sql';
// const HEIGHT_DEFAULT = '300px';
// const HEIGHT_DEFAULT = '100%';
const EDITOR_OPTIONS: IAceOptions = {
    behavioursEnabled: true,
    enableSnippets: false,
    enableBasicAutocompletion: true,
    enableLiveAutocompletion: true,
    autoScrollEditorIntoView: true,
    wrap: true,
    useWorker: false,
};

/**
 * Editor Component
 * @param props ISqlEditorProps
 */
function Editor(props: any) {

    const { isRightTheme, value, onChange } = props

    const refEditor = useRef<ReactAce>();
    const [values, setValues] = useState()


    const change = (val: any) => {
        setValues(val)
        onChange(val)
    }


    return (
        <div className={styles.sqlEditor}>
            <AceEditor
                ref={refEditor}
                name="aceEditor"
                width="1080px"
                // height="560px"
                fontSize={DEFAULT_FONT_SIZE}
                mode={MODE_DEFAULT}
                theme={isRightTheme ? 'eclipse' : 'monokai'}
                value={values}
                showPrintMargin={false}
                highlightActiveLine={true}
                setOptions={EDITOR_OPTIONS}
                onChange={change}
            />
        </div>
    );
}

export default Editor;
